<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<!-- BEGIN: Head-->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="description" content="Vuesax admin is super flexible, powerful, clean &amp; modern responsive bootstrap 4 admin template with unlimited possibilities.">
    <meta name="keywords" content="admin template, Vuesax admin template, dashboard template, flat admin template, responsive admin template, web app">
    <meta name="author" content="PIXINVENT">
    <title>Register Page - Vuesax - Bootstrap HTML admin template</title>
    <link rel="apple-touch-icon" href="../../../app-assets/images/ico/apple-icon-120.png">
    <link rel="shortcut icon" type="image/x-icon" href="../../../app-assets/images/ico/favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">

    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/vendors.min.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Theme CSS-->
    <link rel="stylesheet" type="text/css" href="http://cdn.bootstrapmb.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/bootstrap-extended.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/colors.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/dark-layout.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/semi-dark-layout.css">

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/core/colors/palette-gradient.css">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/pages/authentication.css">
    <!-- END: Page CSS-->

    <!-- BEGIN: Custom CSS-->
    <link rel="stylesheet" type="text/css" href="../../../assets/css/style.css">
    <!-- END: Custom CSS-->

</head>
<!-- END: Head-->

<!-- BEGIN: Body-->

<body class="vertical-layout vertical-menu-modern 1-column  navbar-floating footer-static bg-full-screen-image  blank-page blank-page" data-open="click" data-menu="vertical-menu-modern" data-col="1-column">
    <!-- BEGIN: Content-->
    <div class="app-content content">
        <div class="content-wrapper">
            <div class="content-header row">
            </div>
            <div class="content-body">
                <section class="row flexbox-container">
                    <div class="col-xl-8 col-10 d-flex justify-content-center">
                        <div class="card bg-authentication rounded-0 mb-0">
                            <div class="row m-0">
                                <div class="col-lg-6 d-lg-block d-none text-center align-self-center pl-0 pr-3 py-0">
                                    <img src="../../../app-assets/images/pages/register.jpg" alt="branding logo">
                                </div>
                                <div class="col-lg-6 col-12 p-0">
                                    <div class="card rounded-0 mb-0 p-2">
                                        <div class="card-header pt-50 pb-1">
                                            <div class="card-title">
                                                <h4 class="mb-0">Create Account</h4>
                                            </div>
                                        </div>
                                        <p class="px-2">Fill the below form to create a new account.</p>
                                        <div class="card-content" id="app">
                                            <div class="card-body pt-0">
                                                <form action="../../../UserRegisterServlet" onsubmit="return test1()">
                                                    <div class="form-label-group">
                                                        <input type="text" id="inputName" v-model="userName" @blur="checkUsername" name="username" class="form-control" placeholder="Name" required>
                                                        <label for="inputName">Name</label>
                                                        <span id="usernameMsg"></span>
                                                    </div>
                                                    <div class="form-label-group">
                                                        <input type="email" id="inputEmail" v-model="email" name="email" class="form-control" placeholder="Email" required>
                                                        <label for="inputEmail">Email</label>
                                                    </div>
                                                    <div class="form-label-group">
                                                        <input type="password" id="inputPassword" v-model="password" name="password" class="form-control" placeholder="Password" required>
                                                        <label for="inputPassword">Password</label>
                                                    </div>
                                                    <div class="form-label-group">
                                                        <input type="password" id="inputConfPassword" class="form-control" placeholder="Confirm Password" required>
                                                        <label for="inputConfPassword">Confirm Password</label>
                                                        <span id="inputConfPasswordMsg"></span>
                                                    </div>
                                                    <!--验证码部分-->
                                                    <div class="form-label-group">
                                                        <input type="password" v-model="yzm" id="yzm" class="form-control" placeholder="验证码" required>
                                                        <label for="yzm">验证码</label>
                                                        <a href="javascript:;" @click="getVerifiCode()"><!--../../../../images/aa.jpg-->
                                                            <img id="yzm_img" title="点击刷新验证码" src="../../../../user/yzm" style="cursor:pointer;width: 100px;height: 36px;margin: 5px 0 0 5px;border-radius: 3px;"/>
                                                        </a>
                                                        <span id="yzmMsg"></span>
                                                    </div>
                                                    <div class="form-group row">
                                                        <div class="col-12">
                                                            <fieldset class="checkbox">
                                                                <div class="vs-checkbox-con vs-checkbox-primary">
                                                                    <input type="checkbox" checked>
                                                                    <span class="vs-checkbox">
                                                                        <span class="vs-checkbox--check">
                                                                            <i class="vs-icon feather icon-check"></i>
                                                                        </span>
                                                                    </span>
                                                                    <span class=""> I accept the terms & conditions.</span>
                                                                    <span id="acceptMsg"></span>
                                                                </div>
                                                            </fieldset>
                                                        </div>
                                                    </div>
                                                    <a href="auth-login.html" class="btn btn-outline-primary float-left btn-inline mb-50">Login</a>
                                                    <button type="button" @click="register" class="btn btn-primary float-right btn-inline mb-50">Register</button>

                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

            </div>
        </div>
    </div>
    <!-- END: Content-->


    <!-- BEGIN: Vendor JS-->
    <script src="../../../app-assets/vendors/js/vendors.min.js"></script>
    <!-- BEGIN Vendor JS-->

    <!-- BEGIN: Page Vendor JS-->
    <!-- END: Page Vendor JS-->

    <!-- BEGIN: Theme JS-->
    <script src="../../../app-assets/js/core/app-menu.js"></script>
    <script src="../../../app-assets/js/core/app.js"></script>
    <script src="../../../app-assets/js/scripts/components.js"></script>
    <!-- END: Theme JS-->

    <!-- BEGIN: Page JS-->
    <!-- END: Page JS-->

    <!--begin:vue-->
    <script src="../../../app-assets/js/scripts/vue.min.js"></script>
    <script src="../../../app-assets/js/scripts/axios.js"></script>
    <!--end:vue-->

    <script src="../../../app-assets/js/scripts/shop.js"></script>

</body>
<!-- END: Body-->
<script>
    new Vue({
        el:'#app',
        data:{
            userName:'',
            password:'',
            email:'',
            yzm:''
        },//逻辑删除、前端ajax清缓存、
        methods:{
            register(){
                //带着数据去后台注册
                axios({
                    url:getRootPath()+"/user/register?yzm="+this.yzm,//@RequestParam
                    method:'post',
                    data:{
                        userName:this.userName,
                        password:this.password,
                        email:this.email,
                        //yzm:this.yzm,
                    }//@RequstBody UserInfo user
                }).then(res=>{
                    console.log(res.data);
                    if(res.data.code!='200'){
                        console.log(res.data.msg)
                    }else{
                        window.location.href = "auth-login.html"
                    }
                }).catch(res=>{console.log("挂了")})
            },
            getVerifiCode(){
                //骗浏览器，不让它用缓存
                $("#yzm_img").attr("src",getRootPath()+"/user/yzm?aa="+Math.random());//<img src="...">
            },
            checkUsername(){
                console.log(666)
                //去后台验证 文本框中输入的 用户名
                axios({
                    url:getRootPath()+"/user/checkUsername/"+this.userName,
                }).then(res=>{
                    console.log(res.data);
                    //判断处理一下后台的返回值
                    if(res.data.code!='200'){
                        console.log(res.data.msg)
                        this.userName = '';//可以用vue的方式来处理文本框中的值，
                    }
                }).catch(res=>{
                    console.log("挂了")
                })
            }
        }
    })
</script>
</html>